<template>
	<div class="register-container">
        <!-- 导航栏 -->
        <TmallNavBar>
            <template #default>用户注册</template>
            <template #right>
				<i class="icon iconfont icon-shouye1" @click="$router.push({path: '/'})"></i>
			</template>
        </TmallNavBar>

        <!-- logo -->
		<div class="face-wapper" @click="goto('/')">
			<van-image :src="loginImage" class="face" />
			<div class='text'>三叉戟商城，精品购物品牌</div>
		</div>
		
        <!-- 表单 -->
		<div class="register-box">
			<van-form @submit="handlerRegister">
				<!-- 用户名 -->
                <van-field
                    v-model="formData.username"
                    :label-width="labelWidth"
                    name="用户名"
                    label="用户名"
                    placeholder="请输入用户名"
                    maxlength="30"
                    left-icon="user-o"
                    :rules="[{ required: true, message: '请输入用户名' }]"
                />
				
				<!-- 手机号 -->
                <van-field
                    v-model="formData.mobile"
                    :label-width="labelWidth"
                    type="number"
                    name="手机号"
                    label="手机号"
                    placeholder="请输入手机号"
                    left-icon="phone-o"
                    maxlength="11"
                    :rules="[
                        { required: true, message: '请输入手机号' },
                        { validator:mobileValidator, message: '请输入正确格式的手机号' }
                    ]"
                />
				
				<!-- 邮箱 -->
                <van-field
                    v-model="formData.email"
                    :label-width="labelWidth"
                    name="邮箱"
                    label="邮箱"
                    placeholder="请输入邮箱"
                    left-icon="envelop-o"
                    maxlength="30"
                    :rules="[
                        { required: true, message: '请输入邮箱' },
                        { validator:emailValidator, message: '请输入正确格式的邮箱' }
                    ]"
                />
				
				<!-- 密码 -->
                <van-field
                    v-model="formData.password"
                    :label-width="labelWidth"
                    type="password"
                    name="密码"
                    label="密码"
                    left-icon="lock"
                    placeholder="请输入密码"
                    :rules="[{ required: true, message: '请输入密码' }]"
                />
				
				<!-- 确认密码 -->
                <van-field
                    v-model="formData.repassword"
                    :label-width="labelWidth"
                    type="password"
                    name="确认密码"
                    label="确认密码"
                    left-icon="lock"
                    placeholder="请输入确认密码"
                    :maxlength="16"
                    :rules="[
                        { required: true, message: '请输入确认密码' },
                        { validator: validatorMessage }
                    ]"
                />

                <!-- 注册按钮 -->
                <div style="margin: 16px">
                    <van-button
                        type="primary"
                        native-type="submit"
                        round
                        block
                        color="#27BA9B"
                    >
                        注&nbsp;&nbsp;册
                    </van-button>
                </div>
			</van-form>
			
			<div class="footer-wapper">
				<div @click="goto('/passwordLogin')">密码登录</div>
				<div @click="goto('/forgotPassword')" style="font-size: 36upx;color: #E83915;">找回密码</div>
				<div @click="goto('/messageLogin')">短信登录</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { reactive, ref } from "vue"
import loginImage from '@/assets/images/logo.png'
import {useRouter} from 'vue-router'
import { showSuccessToast } from 'vant'
import { useUserStore } from '@/store/modules/user'

// 用户存储
const userStore = useUserStore()

// 路由器
const router = useRouter()

// 输入框标签宽度
const labelWidth = ref('60px')

// 确认密码
const validatorMessage = (value) => {
    return value != formData.password ? '两次密码不一致' : '' 
}

// 手机号验证
const mobileValidator = (value) => /^1[3|5|7|8|9]\d{9}$/.test(value)

// 邮箱验证
const emailValidator = (value) => /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/.test(value)

// 提交数据
const formData = reactive({
	username: '',
	mobile: '',
	email: '',
	password: '',
	repassword: ''
})


// 处理注册
const handlerRegister = async () => {
    await userStore.register(formData)
    showSuccessToast('注册成功')
    
    setTimeout(() => {
        // 跳转登录页面
        router.push({path: '/passwordLogin'})
    }, 1000)
}

// 跳转
const goto = (url) => {
    router.push({path: url})
} 
</script>

<style lang="scss">
.register-container {
    background: ghostwhite;
    height: calc(100vh - 47px);
}
.face-wapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
    margin-top: 47px;
	margin-bottom: 20px;
    padding-top: 40px;
	.face {
		width: 175px;
		height: 75px;
	}
	.text {
		font-size: 13px;
		color: #666;
	}
}
.footer-wapper {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin-top: 10px;
	color: #909399;
    padding: 0 50px;
}
.register-box {
	position: relative;
	top: 5px;
	margin: 0 20px;
}
</style>
